'use strict';
let gulp = require('gulp');
let $ = require('gulp-load-plugins')();
var bs = require("browser-sync").create();
// default
gulp.task('default', ['clean'], $.sequence(['html', 'css', 'js', 'img'], 'w'))
// watch
gulp.task('w', function () {
  gulp.start('server');
  gulp.watch('src/**/*.pug',['html']);
  gulp.watch('src/**/*.scss',['css']);
  gulp.watch('src/**/*.js',['js']);
  gulp.watch('src/**/*.{jpg,png}',['img']);
})
// clean
gulp.task('clean', function () {
  return gulp.src('./kangaroo').pipe($.clean());
})
// html
gulp.task('html', function () {
  return gulp.src([
    'src/**/*.pug',
    '!src/components/**/*.pug',
  ])
    .pipe($.pug({
      pretty: true
    }))
    .pipe(gulp.dest('kangaroo'))
})
// css
gulp.task('css', function () {
  return gulp.src([
    'src/**/*.{scss,css}',
    '!src/css/components**/*.scss'
  ])
    .pipe($.plumber())
    .pipe($.sass())
    .pipe($.autoprefixer({
      browsers: ['last 100 versions'],
      cascade: false,
      remove:false
    }))
    .pipe($.minifyCss({
      advanced: false,
      compatibility: "ie7",
      keepBreaks: true,
      keepSpecialComments: '*'
    }))
    .pipe($.plumber.stop())
    .pipe(gulp.dest('kangaroo'));
})
// js
gulp.task('js', function () {
  return gulp.src(['src/**/*.js'])
    .pipe(gulp.dest('kangaroo'));
})
// img
gulp.task('img', function () {
  return gulp.src('src/**/*.{jpg,png}')
    .pipe(gulp.dest('kangaroo'));
})
// server
gulp.task('server', function () {
  bs.init({
    ui: false,notify: false,open: false,logPrefix: 'bs',
    port: 8089,
    server: {
      baseDir: 'kangaroo',
      directory: true
      // index: 'page/index.html'
    },
    files: [{
      match: [
        'kangaroo/**/*.html', 
        'kangaroo/**/*.css',
        'kangaroo/**/*.js',
        'kangaroo/**/*.{jpg,png}',
      ],
      fn: function (event, file) {if (event === "change") {bs.reload();}}
    }]
  })
})
